<template>
	<div class="menu_three">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span v-if="item.title!=undefined">{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label v-if="item.price!=undefined">￥<strong>{{item.price}}</strong><a>起</a></label>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_three',
		data(){
			return{
				list:[
					{id:1,img:'threeimg/1.jpg'},
					{id:2,img:'threeimg/2.jpg',title:'桂林出发',txt:'[跟着皇帝游江南]南京栖霞山-镇江西津渡-无锡寄畅园-太湖鼋头渚-苏州虎丘，制香囊/惠山泥人/手绘宝塔，品早茶/赠汉服体验，宿房车营地（亲子5日游学）',price:'1980',time:'7天6晚'},
					{id:3,img:'threeimg/3.jpg',title:'南京出发',txt:'[高铁直达·玩转古徽州]寒假报名中，穿越千年跟着课本游桃花潭，行走于徽派绝世水墨画中，手作徽毛笔/呈坎大作战/黄山脚下房车观星/隐秘古村寻味（4日亲子游学）',price:'2850',time:'5天4晚'},
					{id:4,img:'threeimg/4.jpg',title:'黄山出发',txt:'[山海奇遇·贵州]全年批次—地心恒温15℃的奇趣历险，酷玩森林（洞穴露营+溜索+速降）、平塘天眼探秘宇宙、老寨定向寻古、荔波小七孔精华游览，适合5岁以上孩子，品质住宿5日',price:'1080',time:'4天3晚'},
					{id:5,img:'threeimg/5.jpg',title:'贵阳出发',txt:'[游侠少年·新加坡游学]机器编程科技课堂-访学世界高等学府-全浸润式双语课程-狮城探索-多元文化英语定向-疯狂动物城,7天研学之旅',price:'3980',time:'5天4晚'},
					{id:6,img:'threeimg/6.jpg',title:'上海出发',txt:'[游侠宝贝 • 奇趣沙巴]闯进“亚洲亚马逊”（婆罗洲雨林航行）-探秘海底世界（环滩岛浮潜）-萤火虫之夜-神山大冒险，7天6晚马来西亚博物之旅',price:'6522',time:'6天5晚'},
					{id:7,img:'threeimg/7.jpg',title:'吉林出发',txt:'[向野房车 • 长白山亲子]Van To Snow丨遇见云顶“天池”/国际滑雪体验/欢乐冰雪运动会/北方渔猎文化“冬捕”/两极温泉/寻访朝鲜村落/“不冻河”漂流雪国6日游',price:'4980',time:'6天5晚'},
					{id:8,img:'threeimg/8.jpg',title:'哈尼出发',txt:'[冰雪奇遇·极地漠河] 一路向北看祖国  圣诞村滑雪，拜访圣诞老人、驯鹿近距离接触、打卡北极村最北邮局&升国旗、边境冬捕，多重体验东北5日（含火车票）',price:'2680',time:'5天4晚'},
					{id:9,img:'threeimg/9.jpg',title:'哈尔出发',txt:'[东北冰雪亲子]12-2月<游侠客亲子Top> -《爸爸去哪儿》雪乡、长白山森林营地，丰富体验（万科滑雪、大雪谷徒步、镜泊湖冬捕、不冻河漂流、朝鲜族民俗、雾凇/陨石）7日',price:'3880',time:'6天5晚'},
					{id:10,img:'threeimg/10.jpg',title:'北京出发',txt:'[游侠宝贝·古动物馆奇妙夜]12-1月，穿越侏罗纪，夜游博物馆，宿恐龙馆，沉浸式故事体验，模拟体验专业考古过程，了解恐龙衍化的秘密，体验化石修复（北京亲子）',price:'390',time:'2天1晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.menu_three{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	.menu_three ol li{
		width: 48%;
		margin: 1%;
		float: left;
		border-radius: 0.6rem;
		background-color: white;
		position: relative;
	}
	.menu_three li:first-child img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem;
	}
	.menu_three li:first-child{
		width: 48%;
		height: 16rem;
	}
	
	.menu_three li img{
		width: 100%;
		height: 100%;
		border-radius: 0.6rem 0.6rem 0 0;
	}
	.menu_three li span{
		position: absolute;
		top: 0;
		right: 0;
		padding: 0.5rem 1rem;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0 0.5rem 0 0.5rem;
		color: white;
	}
	.menu_three li aside p{
		margin: 0.2rem 0.5rem;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
	}
	.menu_three li aside label{
		display: block;
		padding: 0.2rem 0.5rem;
		float: left;
		color: gray;
	}
	.menu_three li aside label strong{
		color: orange;
		font-weight: bold;
		font-size: 1rem
	}
	.menu_three li aside em{
		padding: 0.2rem 0.5rem;
		float: right;
		color: #808080;
	}
	.menu_three li:nth-of-type(even){
		margin-top: 1rem;
	}
</style>
